<template>
  <div>
    <div class="mainCon">
      <div class="containercontent">
        <div class="seachTip selectw100">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              名称
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-input v-model="searchName" size="mini" placeholder="用户名称" @keyup.enter.native="readUser(employeQuery,'search')"></el-input>
            </div>

          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              用户状态
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select size="mini" v-model="enableStatusValue" @change="readUser(employeQuery,'search')">
                <el-option v-for="item in enableStatus" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <!--<div class="inlineblock basicRightDistanceA searchIcon">
              <el-button  size="mini" icon="el-icon-search" @click="readUser(employeQuery)"></el-button>
          </div>-->
          <div class="inlineblock basicRightDistanceA searchIcon" style="margin-left:10px;">
            <el-button size="mini" @click="readUser(employeQuery,'search')">搜索</el-button>
            <el-button size="mini" @click="emptySearch()">清空</el-button>
          </div>
        </div>
       

        <div class="separaterowTable">
          <div class="tableTittle">
            <div><span class="fontImpact">1</span><span>人员信息</span></div>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="newUser" style="float:right" v-if = "userOpernation.add.display">添加人员</el-button>
          </div>
          <el-table :data="userTableDate" style="width: 100%" class="tableCon" size="mini">
            <el-table-column label="序号" min-width="50px">
              <template slot-scope="scope">
                {{scope.$index+(employeQuery.page - 1) * employeQuery.pageCount + 1}}
              </template>
            </el-table-column>
            <el-table-column property="account" label="账户"  min-width="120px">
            </el-table-column>
            <el-table-column property="name" label="姓名" min-width="100px">
            </el-table-column>
            <el-table-column label="性别" min-width="80px" property="sex" :formatter="sexFormatter">
            
            </el-table-column>
            <el-table-column label="联系电话" min-width="200px">
              <template slot-scope="scope">
                {{scope.row.mobile == '' || scope.row.mobile == undefined ? "---":scope.row.mobile}}
              </template>
            </el-table-column>
            <el-table-column label="电子邮箱" min-width="200px" property="email">
              <template slot-scope="scope">
                {{scope.row.email == '' || scope.row.email == undefined ? "---":scope.row.email}}
              </template>
            </el-table-column>
            <el-table-column property="status" label="状态" min-width="90px" :formatter="formatter">
            </el-table-column>
            <el-table-column label="操作" min-width="200px" >
              <template slot-scope="scope">
                <el-button v-if="scope.row.status=='1' && userOpernation.disable.display" type="text" size="mini" @click="isStart(scope.row)">停用</el-button>
                <el-button v-if="scope.row.status=='0' && userOpernation.enable.display" type="text" size="mini" @click="isStart(scope.row)">启用</el-button>
                <el-button @click="editUser(scope.row,'edit')" v-if = "userOpernation.update.display" type="text" size="mini">编辑</el-button>
                <el-button @click="editUser(scope.row,'look')" v-if = "userOpernation.select.display" type="text" size="mini">详情</el-button>
                <el-button @click="deleteUser(scope.row)" type="text" v-if = "userOpernation.delete.display" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block changepages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="employeQuery.page" :page-sizes="[20,30,40]"
              :page-size="employeQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div v-if="userDetailShow">
      <user-edit :newOrEdit="newOrEdit" :canEdit="canEdit" :userDetail="userDetail"></user-edit>
    </div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  const userEdit = () => import('./children/userEdit.vue');

  export default {
    data() {
      return {
        searchName: '', //搜索框名称
        enableStatusValue: '',//搜索框状态
        employeQuery: {
          page: 1, //第几页
          pageCount: 20, //页面得记录条数，
        },
        userTableDate: [], //培训人员列表数据
        rowNumber: 0, //总条数
        newOrEdit: '', //是新增或者编辑
        canEdit: true, //是否可编辑
        userDetailShow: false, //用户新增编辑弹框
        userDetail: [], //人员详情
      }
    },
    components: {
      userEdit
    },
    computed: {
      ...mapState(['enableStatus', 'sexValue', 'groupSelect']),
    },
    mounted() {
      this.$store.dispatch('dogetDictionary');
      this.$store.dispatch('readEnableMaterTypeList');
      this.$store.dispatch('readSupplierList')
      this.$store.dispatch('readSupplierComboList')
      this.$store.dispatch('getEmployeeByLab')
      this.readUser(this.employeQuery)
    },
    props:["userOpernation"],
    watch: {
      employeQuery: {
        handler(val, oldVal) {
          this.readUser(this.employeQuery)
        },
        deep: true
      },
    },
    methods: {
      // 清空搜索数据
      emptySearch() {
        this.searchName = '';//搜索框名称
        this.enableStatusValue = '';
        this.readUser(this.employeQuery,'search');
      },
      // 转换状态
      formatter(row, column, cellValue, index) {
        return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })
      },
      // 转换性别
      sexFormatter(row, column, cellValue, index) {
        return this.util.codeChangeName({ cellValue: cellValue, list: this.sexValue })
      },
      // 转换岗位
      postFormatter(row, column, cellValue, index) {
        var post = '';
        for (var i in cellValue) {
          post = this.util.codeChangeName({ cellValue: cellValue[i], list: this.groupSelect.itemList }) + ',' + post;
        }
        return post
      },
      // 读取人员列表
      readUser(parp,search) {
        var params = {
          name: this.searchName,
          status: this.enableStatusValue,
        }
        if(search !=undefined){
					this.employeQuery.page = 1;
					params.page =  1;
					params.pageCount = parp.pageCount;
				}else{
					params.page =  parp.page;
					params.pageCount = parp.pageCount;
				}

        this.$http({
          method: 'post',
          apiUrl: '/resource/readEmployee.htm',
          params: params,
          isJson: true,
        }).then(res => {
          if (res.code === 0) {

            this.userTableDate = res.data;
            if (!res.pageinfo) {
              this.rowNumber = 0;
            } else if (res.pageinfo && !res.pageinfo.rowNumber) {
              this.rowNumber = 0;
            } else {
              this.rowNumber = res.pageinfo.rowNumber;
            }
          }

        })
      },
      // 添加人员
      newUser() {
        this.userDetailShow = true;
        this.newOrEdit = "new";
        this.canEdit = true;
      },
      // 编辑人员
      editUser(row, isEdit) {
        this.newOrEdit = isEdit;
        if (isEdit == 'edit') {
          this.canEdit = true;
        } else {
          this.canEdit = false;
        }
        this.$http({
          method: 'post',
          apiUrl: '/resource/detailEmployee.htm',
          params: { id: row.id },
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            this.userDetail = res.data;
            this.userDetailShow = true;
          }
        })
      },
      deleteUser(row) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var that = this;
          var param = {
            id: row.id,
          }
          this.$http({
            apiUrl: '/resource/deleteEmployee.htm',
            type: 'post',
            params: param,
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.readUser(this.employeQuery)
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      isStart(row) {
        var msg = row.status == 0 ? "启用" : "停用";
        this.$confirm("是否" + msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: 'post',
            apiUrl: '/resource/closeOrOpenEmployee.htm',
            params: {
              id: row.id,
              status: row.status == 0 ? 1 : 0,
            },
            isJson: true,
          }).then(res => {
            if (res.code === 0) {
              this.readUser(this.employeQuery)
            }

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + msg
          });
        });
      },
      // 分页信息
      handleSizeChange: function (val) {
        this.employeQuery.pageCount = val;
      },
      handleCurrentChange: function (val) {
        this.employeQuery.page = val;
      },
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .infoitem {
    width: calc(100%/3);
    padding: 0;
    margin-right: 5px;
  }


  .informationItem {
    width: calc(100% - 78px);
    float: none;
    margin-left: 8px;
  }
</style>